<template>
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <v_menu :title="data.title" :site="site"></v_menu>

    <!--稿件创新指数-->
    <Row :gutter="16" class="wrapper">
      <i-col span="19" class="content">

        <uploading
          @returnTitle="returnTitle"
          @returnKeyword="returnKeyword"
          @returnAbstract="returnAbstract"
          @returnLiterature="returnLiterature"
          @returnMainBody="returnMainBody"
          @write="write"
          v-show="uploading"
        ></uploading>

        <fillIn v-if="title" :title="title" :keyword="keywordss" :abstract="abstract" :literature="literature"
                :mainBody="mainBody"
                @returnTitle="returnTitle" @returnKeyword="returnKeyword" @returnAbstract="returnAbstract"></fillIn>
      </i-col>
      <i-col span="5" class="navigation">
        <ngn :data="data"></ngn>
      </i-col>
    </Row>


    <Modal v-model="modal1" width="650px">
      <div slot="header" class="header">稿件创新指数</div>
      <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <gauge :gauge="gauge" style="display: inline-block"></gauge>
        <radar :score="score" style="display: inline-block"></radar>
        <!--评星-->
        <!--        <div>
                  <div class="giveAmark">
                    <span style="">标题：</span>
                    <Rate disabled :count="8" v-model="headlineGrade"/>
                  </div>
                  <div class="giveAmark">
                    <span>关键字：</span>
                    <Rate disabled :count="8" v-model="keywordGrade"/>
                  </div>
                  <div class="giveAmark">
                    <span>摘要：</span>
                    <Rate disabled :count="8" v-model="digestGrade"/>
                  </div>
                </div>-->
        <!--创新度相似的文章-->
        <div>
          <div class="giveAmark" style="padding: 10px;background: #dbf2fb;margin-top: 10px">创新度相似的文章：</div>
          <div class="article" v-for="headline in headline">
            <p><span class="bold">标题：</span>{{headline[0].title}}</p>
            <p><span class="bold">关键字：</span>{{headline[0].keywords}}</p>
            <p><span class="bold">摘要：</span>{{headline[0].summary}}</p>
          </div>
          <div class="article" v-for="keyword in keyword">
            <p><span class="bold">标题：</span>{{keyword[0].title}}</p>
            <p><span class="bold">关键字：</span>{{keyword[0].keywords}}</p>
            <p><span class="bold">摘要：</span>{{keyword[0].summary}}</p>
          </div>
          <div class="article" v-for="digest in digest">
            <p><span class="bold">标题：</span>{{digest[0].title}}</p>
            <p><span class="bold">关键字：</span>{{digest[0].keywords}}</p>
            <p><span class="bold">摘要：</span>{{digest[0].summary}}</p>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>


    <div class="wrongWords" v-show="fillIn">
      <Button type="info" class="btn0" @click="toExamine">我要评测</Button>
      <!--      <Button type="info" class="btn1"  @click="$router.push('/assess')">下一步</Button>-->
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import radar from '../module/radar';
  import gauge from '../module/gauge';
  import fillIn from '../module/fillIn'
  import v_menu from '../module/menu'
  import ngn from '../module/ngn'
  import uploading from '../module/uploading'

  export default {
    components: {carousel, radar, gauge, fillIn, v_menu, ngn, uploading},
    data() {
      return {
        /*轮播*/
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        /*导航*/
        site: '稿件创新指数',
        data: {
          title: '论文投稿',
          list: [
            {list: '投稿流程', link: '/contributeProcess'},
            {list: '投稿指南', link: '/contributeGuide'},
          ]
        },
        /*稿件创新指数*/
        list: {
          title: '',
          keywords: '',
          summary: '',
        },
        /*仪表图*/
        gauge: 0,
        /*雷达图*/
        score: [],
        /*评星*/
        headlineGrade: 0,
        keywordGrade: 0,
        digestGrade: 0,
        /**/
        headline: {},
        keyword: {},
        digest: {},
        /**/
        modal1: false,
        spinShow: true,

        uploading: true,
        fillIn: false,


        title: '',
        keywordss: '',
        abstract: '',
        literature: '',
        mainBody: '',
      }
    },
    mounted() {
      window.scrollTo(0, 0);
    },
    methods: {
      write(data) {
        if (data == true) {
          this.fillIn = data;
          this.uploading = !data
        }
        if (data == false) {
          this.fillIn = !data;
          this.uploading = data;
          this.title = ' '
        }
      },
      returnTitle(data) {
        this.title = data;
        this.list.summary = data
      },
      returnKeyword(data) {
        this.keyword = data;
        this.list.keywords = data
      },
      returnAbstract(data) {
        this.abstract = data;
        this.list.title = data
      },
      returnLiterature(data) {
        this.value = data;
        this.literature = data;
      },
      returnMainBody(data) {
        this.mainBody = data;
      },


      /*稿件创新指数*/
      toExamine() {
        this.modal1 = true;
        if (this.list.title) {
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(this.list),
            url: this.$api.url + '/thesis/ManuscriptInnovationIndex',
          }).then((res) => {
            if (res.status == 200) {
              this.spinShow = false;
              this.headlineGrade = res.data[0].result;
              this.keywordGrade = res.data[1].result;
              this.digestGrade = res.data[2].result;
              this.gauge = res.data[3];

              for (let a of res.data) {
                this.score.push(a.result);
              }
              this.headline = res.data[0].detail;
              this.keyword = res.data[1].detail;
              this.digest = res.data[2].detail;

            }
          });
        }
      },
    }
  }
</script>

<style scoped>
  /*主要内容*/
  .wrapper .content {
    border-right: 1px solid #ccc;
    min-height: 300px;
    padding-top: 20px;
  }

  .wrapper .content .steps {
    position: relative;
    left: 100px;
  }

  .wrapper .navigation {
    padding-left: 0 !important;
  }

  .wrongWords {
    text-align: center;
    margin: 20px 0;
  }

  .wrongWords .btn0 {
    background: #d71619;
    border-color: #d71619;
  }

  .wrongWords .btn1 {
    background: #2b369f;
    border-color: #2b369f;
  }

  .giveAmark {
    font-weight: bold;
  }

  .giveAmark span {
    display: inline-block;
    width: 50px;
  }

  .article {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
  }

  .bold {
    font-weight: bold;
    display: inline-block;
    width: 50px;
  }
</style>
<style>
  .ivu-modal .ivu-modal-content .ivu-modal-header {
    background: #2b369f;
    color: #fff;
  }

  .ivu-steps-horizontal .ivu-steps-content {
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
    position: relative;
    right: 25px;
  }

  .ivu-steps .ivu-steps-head-inner {
    margin-right: 0;
  }

  .ivu-modal-close .ivu-icon-ios-close {
    color: #fff;
  }

  .ivu-modal-footer {
    border-top: none;
    padding: 0;
  }

  .ivu-modal-body {
    height: 500px;
    overflow: auto;
  }
</style>
